<template>
  <div>
    <a-button type="primary" @click="openAddModal" style="margin-bottom: 10px;">添加</a-button>
    <a-table :columns="courseRequirementColumns" :data-source="courseRequirementData" row-key="key">
      <span slot="action" slot-scope="text, record">
        <span
          style="color: #028BE2; cursor: pointer; margin-right: 20px;"
          @click="openEditModal(record)"
        >编辑</span>
        <span
          style="color: #028BE2; cursor: pointer; margin-right: 20px;"
          @click="deleteCourseRequirement(record.key)"
        >删除</span>
      </span>
    </a-table>

    <a-modal
      :visible="modalVisible"
      title="课程要求信息"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
    >
      <div>
        <div>
          <span>课程名称: </span>
          <a-input v-model="currentRecord.courseName" />
        </div>
        <div>
          <span>允许排课节次: </span>
          <a-select mode="multiple" style="width:200px;" v-model="currentRecord.allowedSections">
            <a-select-option v-for="section in allSections" :key="section" :value="section">
              {{ section }}
            </a-select-option>
          </a-select>
        </div>
        <div>
          <span>是否尽量均衡: </span>
          <a-switch v-model="currentRecord.isBalanced" />
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { Table, Select, Switch, Button, Input, Modal } from 'ant-design-vue';

export default {
  components: {
    'a-table': Table,
    'a-select': Select,
    'a-select-option': Select.Option,
    'a-switch': Switch,
    'a-button': Button,
    'a-input': Input,
    'a-modal': Modal
  },
  data() {
    return {
      courseRequirementColumns: [
        {
          title: '课程名称',
          dataIndex: 'courseName',
          key: 'courseName'
        },
        {
          title: '允许排课节次',
          dataIndex: 'allowedSections',
          key: 'allowedSections'
        },
        {
          title: '是否尽量均衡',
          dataIndex: 'isBalanced',
          key: 'isBalanced',
		  customRender: function (text, record) {
		    return text==true?'是':'否'
		  },
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          width: 220,
          scopedSlots: {
            customRender: 'action'
          }
        }
      ],
      courseRequirementData: [
        {
          key: '1',
          courseName: 'PLC与工业控制技术',
          allowedSections: ['第1节', '第2节'],
          isBalanced: false
        }
      ],
      allSections: ['第1节', '第2节', '第3节', '第4节', '第5节'],
      modalVisible: false,
      currentRecord: {
        key: null,
        courseName: '',
        allowedSections: [],
        isBalanced: false
      },
      isAdding: false
    };
  },
  methods: {
    openAddModal() {
      this.isAdding = true;
      this.currentRecord = {
        key: null,
        courseName: '',
        allowedSections: [],
        isBalanced: false
      };
      this.modalVisible = true;
    },
    openEditModal(record) {
      this.isAdding = false;
      this.currentRecord = { ...record };
      this.modalVisible = true;
    },
    handleModalOk() {
      if (this.isAdding) {
        const newKey = String(Number(this.courseRequirementData[this.courseRequirementData.length - 1].key) + 1);
        this.courseRequirementData.push({
          key: newKey,
          courseName: this.currentRecord.courseName,
          allowedSections: this.currentRecord.allowedSections,
          isBalanced: this.currentRecord.isBalanced
        });
      } else {
        const index = this.courseRequirementData.findIndex(item => item.key === this.currentRecord.key);
        if (index!== -1) {
          this.courseRequirementData[index] = {
            ...this.courseRequirementData[index],
            courseName: this.currentRecord.courseName,
            allowedSections: this.currentRecord.allowedSections,
            isBalanced: this.currentRecord.isBalanced
          };
        }
      }
      this.modalVisible = false;
    },
    handleModalCancel() {
      this.modalVisible = false;
    },
    deleteCourseRequirement(key) {
      this.courseRequirementData = this.courseRequirementData.filter(item => item.key!== key);
    }
  }
};
</script>

<style scoped>
/* 可以添加一些样式 */
</style>